import Vue from 'vue'
//插件的包
import PerfectScrollbar from 'perfect-scrollbar'
//对应的css
import 'perfect-scrollbar/css/perfect-scrollbar.css'
/**
 * @description 自动判断该更新PerfectScrollbar还是创建它
 * @param {HTMLElement} el - 必填。dom元素
 */
const el_scrollBar = (el, props) => {
  if (el._ps_ instanceof PerfectScrollbar) {
    el._ps_.update()
  } else {
    //el上挂一份属性
    el._ps_ = new PerfectScrollbar(el, props)
  }
}
const scrollbar = Vue.directive('scrollbar', {
  inserted(el, binding, vnode) {
    let dom = el.querySelector(binding.value) || el
    dom.style.overflow = 'hidden!important'
    //判断其样式是否存在position 并且position为"fixed", "absolute"或"relative"
    //如果不符合条件，抛个错误。当然你也可以抛个警告然顺便给其position自动加上"relative"
    //为什么要这么做呢，因为PerfectScrollbar实现原理就是对dom注入两个div，一个是x轴一个是y轴，他们两的position都是absolute。
    //对css稍有常识的人都知道，absolute是相对于所有父节点里设置了position属性的最近的一个节点来定位的，为了能够正确定位，我们要给其设置position属性
    const rules = ['fixed', 'absolute', 'relative', 'sticky']
    if (!rules.includes(window.getComputedStyle(el, null).position)) {
      console.error(
        `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
          '、'
        )}`
      )
    }
    //el上挂一份属性
    el_scrollBar(dom, { scrollXMarginOffset: 5, wheelPropagation: true })
    // var xScroll = dom.getElementsByClassName('ps__thumb-x')[0];
    // var table = dom.getElementsByTagName('table')[0]||dom;
    // var scrollWidth = 0
    // dom.addEventListener('ps-x-reach-start',()=>{
    //   scrollWidth = xScroll.offsetWidth
    //   xScroll.style.width = `${scrollWidth}px`
    // })
    // dom.addEventListener('ps-x-reach-end', () => {
    //   xScroll.style.left = `${table.offsetWidth - scrollWidth}px`
    // })
  },
  //更新dom的时候
  componentUpdated(el, binding, vnode, oldVnode) {
    //vnode.context其实就是vue实例，这里其实无需实例也直接用Vue的静态方法
    //故而也可以写成Vue.nextTick
    vnode.context.$nextTick(() => {
      el = el.querySelector(binding.value) || el
      el_scrollBar(el)
    })
  }
})
export { scrollbar }
